﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts
{
    <script src="@Url.Content("~/Scripts/shared/share.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/shared/shown.js")" type="text/javascript"></script>     
}
<link href="~/Content/css/style.css?v=1.0.0" rel="stylesheet" />
<link href="~/Content/css/conStatis.css" rel="stylesheet" />
<script src="~/Scripts/echarts3.min.js"></script>

<form id="form1" runat="server" method="post" style="height: 100%">
    <div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
        <table style="width: 100%;">
            <tr>
                <td style="width: 100%;">
                    <a class="mini-button" iconcls="icon-search" onclick="LoadData" plain="true">刷新</a>
                    <span class="separator"></span>
                    <a class="mini-button" iconcls="icon-goto" onclick="clearloca" plain="true">重置</a>
                    <span class="separator"></span>
                    <a class="mini-button" iconcls="icon-close" onclick="CloseWindow" plain="true">关闭</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="DivHeader">
        <table>
            <tr>
                <td width="70px" align="right">时间段：</td>
                <td width="482px">
                    @Html.Partial("~/Views/Modular/dxDateTimeRange.cshtml")
                </td>
                <td width="70px" align="right">商户名称：</td>
                <td width="190px">
                    @Html.Partial("~/Views/Modular/LookupCorpInfo.cshtml")
                </td>
            </tr>
        </table>
    </div>
    <div class="cs-content">
        <ul>
            <li class="cs-content-item">
                <div class="chart">
                    <div id="cs_pie"></div>
                    <div class="chartTab">
                        <span data-value="order" class="">单数<i></i></span>
                        <span data-value="amount" class="on">金额<i></i></span>
                    </div>
                </div>
                <div class="cs-chart-detail">
                    <ul>
                        <li class="red">
                            <div class="cs-chart-item">
                                <div class="item">
                                    新增会员 <span id="addMemNum">0</span> 人
                                </div>
                            </div>
                            <div class="cs-chart-item">
                                <div class="item">
                                    消费占比 <span id="addMemConPer">0.00</span> %
                                </div>
                            </div>
                        </li>
                        <li class="blue">
                            <div class="cs-chart-item">
                                <div class="item">
                                    历史会员 <span id="hisMemNum">0</span> 人
                                </div>
                            </div>
                            <div class="cs-chart-item">
                                <div class="item">
                                    消费占比 <span id="hisMemConPer">0.00</span> %
                                </div>
                            </div>
                        </li>
                        <li class="green">
                            <div class="cs-chart-item">
                                <div class="item">
                                    全部会员 <span id="allMemNum">0</span> 人
                                </div>
                            </div>
                            <div class="cs-chart-item">
                                <div class="item">
                                    消费占比 <span id="allMemConPer">0.00</span> %
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="cs-content-item">
                <div class="cs-liveness">
                    <div class="cs-liveness-title">会员活跃度</div>
                    <ul>
                        <li>
                            <div id="totalMemberActive" class="cs-liveness-num">0</div>
                        </li>
                        <li class="border">
                            <div class="cs-liveness-item">会员总消费单据数</div>
                            <div id="totalMemberOrder" class="cs-liveness-item">0</div>
                        </li>
                        <li>
                            <div class="cs-liveness-item">会员总数</div>
                            <div id="totalMember" class="cs-liveness-item">0</div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="cs-content-item">
                <div class="cs-distri">
                    <div class="cs-distri-title">会员活跃分布</div>
                    <ul id="memberActive">
                    </ul>
                </div>
            </li>
            <div class="clear"></div>
        </ul>
    </div>
</form>
<script src="~/Scripts/common.js"></script>
<script type="text/javascript">
    //$(function () {

    mini.parse();

    var nowDate = new Date();
    mini.getbyName("FDateTime1").setValue(dateToStr(nowDate, 1));
    mini.getbyName("FDateTime2").setValue(dateToStr(nowDate, 2));

    function drawCharts(myChart, data) {
        if (data[0].value == 0 && data[1].value == 0) {
            data[1].value = 1;
        }

        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)"
            },
            series: [
                {
                    type: 'pie',
                    radius: ['65%', '90%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    data: data
                }
            ], color: ['rgb(119,183,197)', 'rgb(218,218,218)']
        }

        myChart.setOption(option, true);
    }

    var cspie = echarts.init(document.getElementById('cs_pie'));
    var data = [{ value: 0, name: '' }, { value: 0, name: '' }];
    drawCharts(cspie, data);
    var chartData = {};

    function initData() {
        var param = {
            mSystemAppID: parent.window.getSystemAppID(),
            FCorpID: mini.getbyName("FCorpItemID").getValue(),
            BeginDate: mini.getbyName("FDateTime1").getText(),
            EndDate: mini.getbyName("FDateTime2").getText()
        }
        postRequest('/Member/InitConStatis', param, function (res) {
            if (res.status == 1) {
                var html = "";
                var memberNum = 0;
                for (var i = 0; i < res.data.length; i++) {
                    html += '<li><div class="cs-distri-item">';
                    html += '消费 <span>' + res.data[i].FConsumeName + '</span> 次</div>';
                    html += '<div class="cs-distri-item"><span>' + res.data[i].FMemberNum + '</span> 人</div>';
                    if (res.data[i].TotalMember != 0)
                        html += '<div class="cs-distri-item"><span>' + Math.round((res.data[i].FMemberNum / res.data[i].TotalMember) * 100)  + '</span> %</div>';
                    else
                        html += '<div class="cs-distri-item"><span>0</span> %</div>';
                    html += '<div class="clear"></div></li>';
                    if (res.data[i].consumeCode != 1)
                        memberNum += res.data[i].FMemberNum;
                }

                $("#totalMemberActive").text((memberNum / res.data[0].TotalMember * 100).toFixed(0));
                $("#totalMember").text(res.data[0].TotalMember);
                $("#memberActive").html(html);
            }
        });
    }

    function getMemberStatis() {
        var param = {
            mSystemAppID: parent.window.getSystemAppID(),
            FCorpID: mini.getbyName("FCorpItemID").getValue(),
            BeginDate: mini.getbyName("FDateTime1").getText(),
            EndDate: mini.getbyName("FDateTime2").getText()
        }
        postRequest('/Member/GetMemberStatis', param, function (res) {
            if (res.status == 1) {
                $("#addMemNum").text(res.data[0].NewMember);
                $("#hisMemNum").text(res.data[0].HistoryMember);
                $("#allMemNum").text(res.data[0].TotalMember);
                if (res.data[0].TotalConsume != 0) {
                    $("#addMemConPer").text((res.data[0].NewMemConsume / res.data[0].TotalConsume * 100).toFixed(2));
                    $("#hisMemConPer").text((res.data[0].HistoryMemConsume / res.data[0].TotalConsume * 100).toFixed(2));
                    $("#allMemConPer").text((res.data[0].TotalMemConsume / res.data[0].TotalConsume * 100).toFixed(2));
                } else {
                    $("#addMemConPer").text("0");
                    $("#hisMemConPer").text("0");
                    $("#allMemConPer").text("0");
                }
                $("#totalMemberOrder").text(res.data[0].TotalMemOrderNum);
                chartData.order = [{ value: res.data[0].TotalMemOrderNum, name: '会员' }, { value: res.data[0].TotalOrderNum - res.data[0].TotalMemOrderNum, name: '非会员' }];
                chartData.amount = [{ value: res.data[0].TotalMemAmountNum, name: '会员' }, { value: res.data[0].TotalAmountNum - res.data[0].TotalMemAmountNum, name: '非会员' }];
                drawCharts(cspie, chartData.amount);
                $('.chartTab span:last-child').addClass('on').siblings().removeClass('on');
            }
        });
    }

    function LoadData() {
        initData();
        getMemberStatis();
    }

    function FormShown() {
        
    }

    function clearloca() {
        mini.getbyName("FCorpItemID").setValue("");
        mini.getbyName("FCorpItemID").setText("");
        mini.getbyName("FCorpName").setValue("");
        var nowDate = new Date();
        mini.getbyName("FDateTime1").setValue(dateToStr(nowDate, 1));
        mini.getbyName("FDateTime2").setValue(dateToStr(nowDate, 2));
        mini.getbyName("comdatasel").setValue(0);
    }

    $('.chartTab span').click(function () {
        $(this).addClass('on').siblings().removeClass('on');
        if ($(this).attr('data-value') == "order") {
            drawCharts(cspie, chartData.order);
        } else {
            drawCharts(cspie, chartData.amount);
        }
    });

    getMemberStatis();
    initData();
    // })
</script>
